<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>03姓名案例_计算属性实现</title>
	</head>
	<body>
		<!--计算属性: computed
		1.定义:要用的属性不存在，要通过已有属性计算得来。
		2.原理:底层借助了objcet.defineproperty方法提供的getter和setter。3.get函数什么时候执行?
			(1).初次读取时会执行一次。
			(2).当依赖的数据发生改变时会被再次调用。
		4.优势:与methods实现相比，内部有缓存机制（复用），效率更高,调试方便。
		5.备注:
			1.计算属性最终会出现在vm上，直接读取使用即可。
			2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。 -->
		<div id="app">
			<p>姓<input type="text" v-model="fname" /></p>
			<p>名<input type="text" v-model="lname" /></p>
			<p>测试<input type="text" v-model="fulname" /></p>
			<p>全名 {{fulname}}</p>
		</div>

		<script src="../vue.js"></script>
		<script>
			
			var app = new Vue({
				el: '#app', //Id #id class .name  标签 div
				//输出的数据
				data: function() {
					return {
						fname: "q1",
						lname: 'q12'
					}
				},
				//页面刷新时立刻执行的代码
				mounted: function() {},
				//对象 方法
				methods: {},
				//计算属性
				computed: {
					fulname: {
						//get有什么作用?当有人读取ful1ame时，get就会被调用，且返回值就作为fullName的值
						//get什么时候调用?1.初次读取fullName时。2.所依赖的数据发生变化时.
						get() {
							console.log('get调用了')
							//console.log(this) //此处的this是vm
							return this.fname + "-" + this.lname
						},
						//set什么时恹偏用?当fullName被修改时。
						set(value) {
							console.log("set fullName被修改"+value)
							const arr = value.split('-')
							this.fname = arr[0]
							this.lname = arr[1]
						}
					}
				}
			});//20
		</script>
	</body>
</html>
